React ํฌํธ ์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ์ ์ด๋ฒคํธ ์ ํ์ ๋ฏธ์น๋ ์ํฅ์ ์ดํด๋ณด์ธ์. ๋ณต์กํ UI ์ํธ ์์ฉ๊ณผ ํฅ์๋ ์ ํ๋ฆฌ์ผ์ด์ ๋์์ ์ํด ์ด๋ฒคํธ๋ฅผ ์ ๋ต์ ์ผ๋ก ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
React Portal ์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ: ์ด๋ฒคํธ ์ ํ ์ ์ด ๋ง์คํฐํ๊ธฐ
React ํฌํธ์ ์ผ๋ฐ์ ์ธ DOM ๊ณ์ธต ๊ตฌ์กฐ ์ธ๋ถ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. UI ๋์์ธ์ ์ ์ฐ์ฑ์ ์ ๊ณตํ์ง๋ง, ์ด๋ฒคํธ ์ฒ๋ฆฌ์๋ ๋ณต์ก์ฑ์ ๋ํฉ๋๋ค. ํนํ, ์์ธก ๊ฐ๋ฅํ๊ณ ๋ฐ๋์งํ ์ ํ๋ฆฌ์ผ์ด์ ๋์์ ๋ณด์ฅํ๊ธฐ ์ํด ํฌํธ๋ก ์์ ํ ๋ ์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ๋ฅผ ์ดํดํ๊ณ ์ ์ดํ๋ ๊ฒ์ด ์ค์ํด์ง๋๋ค. ์ด ๊ธฐ์ฌ์์๋ React ํฌํธ ์ด๋ฒคํธ ์บก์ฒ์ ๋ณต์ก์ฑ์ ์์ธํ ์ดํด๋ณด๊ณ , ๊ทธ ์๋ฏธ๋ฅผ ํ๊ตฌํ๋ฉฐ, ํจ๊ณผ์ ์ธ ์ด๋ฒคํธ ์ ํ ์ ์ด๋ฅผ ์ํ ์ค์ฉ์ ์ธ ์ ๋ต์ ์ ๊ณตํฉ๋๋ค.
DOM์์ ์ด๋ฒคํธ ์ ํ ์ดํดํ๊ธฐ
React ํฌํธ์ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ์ดํด๋ณด๊ธฐ ์ ์, DOM(Document Object Model)์์ ์ด๋ฒคํธ ์ ํ์ ๊ธฐ๋ณธ ์ฌํญ์ ์ดํดํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. DOM ์์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด(์: ๋ฒํผ ํด๋ฆญ) ์ธ ๋จ๊ณ ํ๋ก์ธ์ค๊ฐ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค.
- ์บก์ฒ ๋จ๊ณ: ์ด๋ฒคํธ๋ ์ฐฝ์์ ๋์ ์์๋ก DOM ํธ๋ฆฌ๋ฅผ ๋ฐ๋ผ ์ด๋ํฉ๋๋ค. ์บก์ฒ ๋จ๊ณ์์ ์ฐ๊ฒฐ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ๋จผ์ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค.
- ๋์ ๋จ๊ณ: ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋์ ์์์ ๋๋ฌํฉ๋๋ค. ์ด ์์์ ์ง์ ์ฐ๊ฒฐ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค.
- ๋ฒ๋ธ๋ง ๋จ๊ณ: ์ด๋ฒคํธ๋ ๋์ ์์์์ ์ฐฝ์ผ๋ก DOM ํธ๋ฆฌ๋ฅผ ๋ค์ ์ฌ๋ผ๊ฐ๋๋ค. ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ์ฐ๊ฒฐ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ๋ง์ง๋ง์ผ๋ก ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๋๋ถ๋ถ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ์ฐ๊ฒฐ๋ฉ๋๋ค. ์ฆ, ์์ ์์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ํด๋น ์ด๋ฒคํธ๊ฐ ๋ถ๋ชจ ์์๋ฅผ ํตํด '๋ฒ๋ธ๋ง'๋์ด ํด๋น ๋ถ๋ชจ ์์์ ์ฐ๊ฒฐ๋ ๋ชจ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ์ด ๋์์ ๋ถ๋ชจ ์์๊ฐ ์์์ ๋ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ์ด๋ฒคํธ ์์์ ์ ์ฉํ ์ ์์ต๋๋ค.
์: ์ด๋ฒคํธ ๋ฒ๋ธ๋ง
๋ค์ HTML ๊ตฌ์กฐ๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
<div id="parent">
<button id="child">Click Me</button>
</div>
๋ถ๋ชจ div์ ์์ ๋ฒํผ ๋ชจ๋์ ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ๋ฉด ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ ๋ฆฌ์ค๋๊ฐ ๋ชจ๋ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค. ๋จผ์ ์์ ๋ฒํผ์ ๋ฆฌ์ค๋๊ฐ ํธ๋ฆฌ๊ฑฐ๋๊ณ (๋์ ๋จ๊ณ) ๊ทธ ๋ค์ ๋ถ๋ชจ div์ ๋ฆฌ์ค๋๊ฐ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค(๋ฒ๋ธ๋ง ๋จ๊ณ).
React ํฌํธ: ์์ ๋ฐ์์ ๋ ๋๋งํ๊ธฐ
React ํฌํธ์ ์ปดํฌ๋ํธ์ ์์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ DOM ๊ณ์ธต ๊ตฌ์กฐ ์ธ๋ถ์ ์๋ DOM ๋ ธ๋์ ๋ ๋๋งํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ชจ๋ฌ, ํดํ ๋ฐ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋ ๋ฆฝ์ ์ผ๋ก ๋ฐฐ์นํด์ผ ํ๋ ๊ธฐํ UI ์์์ ๊ฐ์ ์๋๋ฆฌ์ค์ ์ ์ฉํฉ๋๋ค.
ํฌํธ์ ์์ฑํ๋ ค๋ฉด ReactDOM.createPortal(child, container) ๋ฉ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. child ์ธ์๋ ๋ ๋๋งํ๋ ค๋ React ์์์ด๊ณ , container ์ธ์๋ ๋ ๋๋งํ๋ ค๋ DOM ๋
ธ๋์
๋๋ค. ์ปจํ
์ด๋ ๋
ธ๋๋ ์ด๋ฏธ DOM์ ์กด์ฌํด์ผ ํฉ๋๋ค.
์: ๊ฐ๋จํ ํฌํธ ๋ง๋ค๊ธฐ
import ReactDOM from 'react-dom';
function MyComponent() {
return ReactDOM.createPortal(
<div>This is rendered in a portal!</div>,
document.getElementById('portal-root') // Assuming 'portal-root' exists in your HTML
);
}
์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ ๋ฐ React ํฌํธ
์ดํดํด์ผ ํ ์ค์ํ ์ ์ ํฌํธ์ ๋ด์ฉ์ด React ์ปดํฌ๋ํธ์ DOM ๊ณ์ธต ๊ตฌ์กฐ ์ธ๋ถ์์ ๋ ๋๋ง๋๋๋ผ๋ ์ด๋ฒคํธ ํ๋ฆ์ ์บก์ฒ ๋ฐ ๋ฒ๋ธ๋ง ๋จ๊ณ์ ๋ํด React ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ๊ตฌ์กฐ๋ฅผ ๋ฐ๋ฅธ๋ค๋ ๊ฒ์ ๋๋ค. ์ด๊ฒ์ ์ฃผ์ํด์ ์ฒ๋ฆฌํ์ง ์์ผ๋ฉด ์๊ธฐ์น ์์ ๋์์ ์ด๋ํ ์ ์์ต๋๋ค.
ํนํ, ์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ๋ ํฌํธ์ ์ฌ์ฉํ ๋ ์ํฅ์ ๋ฐ์ ์ ์์ต๋๋ค. ํฌํธ์ ์ฝํ ์ธ ์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ์ฌ์ ํ ์บก์ฒํ๋ฏ๋ก ํฌํธ์ ๋ ๋๋งํ๋ ์ปดํฌ๋ํธ ์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ์ฐ๊ฒฐ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์์ต๋๋ค. ์ด๋ ์ด๋ฒคํธ๊ฐ ํฌํธ์ DOM ๋ ธ๋์ ๋๋ฌํ๊ธฐ ์ ์ ์๋ React ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๋ฐ๋ผ ์ ํ๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
์๋๋ฆฌ์ค: ๋ชจ๋ฌ ์ธ๋ถ ํด๋ฆญ ์บก์ฒํ๊ธฐ
ํฌํธ์ ์ฌ์ฉํ์ฌ ๋ ๋๋ง๋ ๋ชจ๋ฌ ์ปดํฌ๋ํธ๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ์ฌ์ฉ์๊ฐ ๋ชจ๋ฌ ์ธ๋ถ๋ฅผ ํด๋ฆญํ๋ฉด ๋ชจ๋ฌ์ ๋ซ๊ณ ์ถ์ ์ ์์ต๋๋ค. ์บก์ฒ ๋จ๊ณ๋ฅผ ์ดํดํ์ง ๋ชปํ๋ฉด ๋ชจ๋ฌ ์ฝํ ์ธ ์ธ๋ถ ํด๋ฆญ์ ๊ฐ์งํ๊ธฐ ์ํด ๋ฌธ์ ๋ณธ๋ฌธ์ ํด๋ฆญ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ๋ ค๊ณ ํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ๋ชจ๋ฌ ์ฝํ ์ธ ์์ฒด์ ํด๋ฆญ ๊ฐ๋ฅํ ์์๊ฐ ํฌํจ๋์ด ์์ผ๋ฉด ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ผ๋ก ์ธํด ํด๋น ํด๋ฆญ๋ ๋ฌธ์ ๋ณธ๋ฌธ์ ํด๋ฆญ ๋ฆฌ์ค๋๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. ์ด๊ฒ์ ์ํ๋ ๋์์ด ์๋ ๊ฒ์ ๋๋ค.
์บก์ฒ ๋จ๊ณ๋ก ์ด๋ฒคํธ ์ ํ ์ ์ดํ๊ธฐ
React ํฌํธ์ ์ปจํ ์คํธ์์ ์ด๋ฒคํธ ์ ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ ์ดํ๋ ค๋ฉด ์บก์ฒ ๋จ๊ณ๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค. ์บก์ฒ ๋จ๊ณ์์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ๋ฉด ๋์ ์์์ ๋๋ฌํ๊ฑฐ๋ DOM ํธ๋ฆฌ๋ฅผ ๋ฒ๋ธ๋งํ๊ธฐ ์ ์ ์ด๋ฒคํธ๋ฅผ ๊ฐ๋ก์ฑ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ด๋ฒคํธ ์ ํ๋ฅผ ์ค์งํ๊ณ ์์น ์๋ ๋ถ์์ฉ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
React์์ useCapture ์ฌ์ฉํ๊ธฐ
React์์๋ addEventListener์ ์ธ ๋ฒ์งธ ์ธ์๋ก true๋ฅผ ์ ๋ฌํ๊ฑฐ๋(๋๋ addEventListener์ ์ ๋ฌ๋ ์ต์
๊ฐ์ฒด์์ capture ์ต์
์ true๋ก ์ค์ ํ์ฌ) ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์บก์ฒ ๋จ๊ณ์์ ์ฐ๊ฒฐํด์ผ ํจ์ ์ง์ ํ ์ ์์ต๋๋ค.
React ์ปดํฌ๋ํธ์์ addEventListener๋ฅผ ์ง์ ์ฌ์ฉํ ์ ์์ง๋ง, React ์ด๋ฒคํธ ์์คํ
๊ณผ on[EventName] props(์: onClick, onMouseDown)๋ฅผ DOM ๋
ธ๋์ ๋ํ ref์ ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ผ๋ก ์ข์ต๋๋ค. ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ๋ ค๋ ๊ณณ. React ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ DOM ๋
ธ๋์ ์ก์ธ์คํ๋ ค๋ฉด React.useRef๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์: ์บก์ฒ ๋จ๊ณ๋ฅผ ์ฌ์ฉํ์ฌ ์ธ๋ถ ํด๋ฆญ ์ ๋ชจ๋ฌ ๋ซ๊ธฐ
import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
function Modal({ isOpen, onClose, children }) {
const modalContentRef = useRef(null);
useEffect(() => {
if (!isOpen) return; // Don't attach listener if modal is not open
function handleClickOutside(event) {
if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
onClose(); // Close the modal
}
}
document.addEventListener('mousedown', handleClickOutside, true); // Capture phase
return () => {
document.removeEventListener('mousedown', handleClickOutside, true); // Clean up
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content" ref={modalContentRef}>
{children}
</div>
</div>,
document.body
);
}
export default Modal;
์ด ์์์:
React.useRef๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ฌ ์ฝํ ์ธ div์ ์ฐ๊ฒฐํ๋modalContentRef๋ผ๋ ref๋ฅผ ๋ง๋ญ๋๋ค.useEffect๋ฅผ ์ฌ์ฉํ์ฌ ์บก์ฒ ๋จ๊ณ์์ ๋ฌธ์์mousedown์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ถ๊ฐํ๊ณ ์ ๊ฑฐํฉ๋๋ค. ๋ฆฌ์ค๋๋ ๋ชจ๋ฌ์ด ์ด๋ ค ์์ ๋๋ง ์ฐ๊ฒฐ๋ฉ๋๋ค.handleClickOutsideํจ์๋ ํด๋ฆญ ์ด๋ฒคํธ๊ฐmodalContentRef.current.contains(event.target)์ ์ฌ์ฉํ์ฌ ๋ชจ๋ฌ ์ฝํ ์ธ ์ธ๋ถ์์ ๋ฐ์ํ๋์ง ํ์ธํฉ๋๋ค. ๊ทธ๋ฌ๋ค๋ฉดonCloseํจ์๋ฅผ ํธ์ถํ์ฌ ๋ชจ๋ฌ์ ๋ซ์ต๋๋ค.- ์ค์ํ ์ ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์บก์ฒ ๋จ๊ณ(
addEventListener์ ๋ํ ์ธ ๋ฒ์งธ ์ธ์๊ฐtrue์)์์ ์ถ๊ฐ๋๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ชจ๋ฌ ์ฝํ ์ธ ๋ด์ ๋ชจ๋ ํด๋ฆญ ์ฒ๋ฆฌ๊ธฐ ์ ์ ๋ฆฌ์ค๋๊ฐ ํธ๋ฆฌ๊ฑฐ๋ฉ๋๋ค. useEffectํ ์๋ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋๊ฑฐ๋isOpenprop์ดfalse๋ก ๋ณ๊ฒฝ๋ ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํ๋ ์ ๋ฆฌ ํจ์๋ ํฌํจ๋์ด ์์ต๋๋ค. ์ด๋ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ด๋ฒคํธ ์ ํ ์ค์ง
๋๋ก๋ ์ด๋ฒคํธ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ์ ๋๋ ์๋๋ก ๋ ์ ํ๋๋ ๊ฒ์ ์์ ํ ์ค์งํด์ผ ํ ์ ์์ต๋๋ค. event.stopPropagation() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฅผ ์ํํ ์ ์์ต๋๋ค.
event.stopPropagation()๋ฅผ ํธ์ถํ๋ฉด ์ด๋ฒคํธ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ๋ฒ๋ธ๋งํ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ์ด๋ ์์ ์์ ํด๋ฆญ์ผ๋ก ์ธํด ๋ถ๋ชจ ์์์ ํด๋ฆญ ์ฒ๋ฆฌ๊ธฐ๊ฐ ํธ๋ฆฌ๊ฑฐ๋๋ ๊ฒ์ ๋ฐฉ์งํ๋ ค๋ ๊ฒฝ์ฐ์ ์ ์ฉํ ์ ์์ต๋๋ค. event.stopImmediatePropagation()์ ํธ์ถํ๋ฉด ์ด๋ฒคํธ๊ฐ DOM ํธ๋ฆฌ๋ฅผ ๋ฒ๋ธ๋งํ๋ ๊ฒ์ ๋ฐฉ์งํ ๋ฟ๋ง ์๋๋ผ ๋์ผํ ์์์ ์ฐ๊ฒฐ๋ ๋ค๋ฅธ ๋ฆฌ์ค๋๊ฐ ํธ์ถ๋๋ ๊ฒ๋ ๋ฐฉ์งํฉ๋๋ค.
stopPropagation ์ฌ์ฉ ์ ์ฃผ์์ฌํญ
event.stopPropagation()์ ์ ์ฉํ ์ ์์ง๋ง ์ ์คํ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค. stopPropagation์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ ํ๋ฆฌ์ผ์ด์
์ ์ด๋ฒคํธ ์ฒ๋ฆฌ ๋
ผ๋ฆฌ๋ฅผ ์ดํดํ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ด๋ ค์์ง ์ ์์ต๋๋ค. ๋ํ ์ด๋ฒคํธ ์ ํ์ ์์กดํ๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ์์ ๋์์ ์ค๋จํ ์๋ ์์ต๋๋ค.
React ํฌํธ์ ์ฌ์ฉํ ์ด๋ฒคํธ ์ฒ๋ฆฌ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
- ์ด๋ฒคํธ ํ๋ฆ ์ดํด: ์ด๋ฒคํธ ์ ํ์ ์บก์ฒ, ๋์ ๋ฐ ๋ฒ๋ธ๋ง ๋จ๊ณ๋ฅผ ์์ ํ ์ดํดํ์ญ์์ค.
- ์บก์ฒ ๋จ๊ณ ์ ๋ต์ ์ผ๋ก ์ฌ์ฉ: ํนํ ํฌํธ ์ฝํ ์ธ ์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ๋ ์๋ํ ๋์์ ๋๋ฌํ๊ธฐ ์ ์ ์ด๋ฒคํธ๋ฅผ ๊ฐ๋ก์ฑ๊ธฐ ์ํด ์บก์ฒ ๋จ๊ณ๋ฅผ ํ์ฉํฉ๋๋ค.
stopPropagation๊ณผ๋ํ๊ฒ ์ฌ์ฉํ์ง ์๊ธฐ: ์์์น ๋ชปํ ๋ถ์์ฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ํ์ํ ๊ฒฝ์ฐ์๋งevent.stopPropagation()์ ์ฌ์ฉํ์ญ์์ค.- ์ด๋ฒคํธ ์์ ๊ณ ๋ ค: ๊ฐ๋ณ ์์ ์์์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ๋ ๋์ ์ด๋ฒคํธ ์์์ ํ์ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฑ๋ฅ์ด ํฅ์๋๊ณ ์ฝ๋๊ฐ ๋จ์ํ๋ ์ ์์ต๋๋ค. ์ด๋ฒคํธ ์์์ ์ผ๋ฐ์ ์ผ๋ก ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ๊ตฌํ๋ฉ๋๋ค.
- ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ ๋ฆฌ: ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋๊ฑฐ๋ ๋ ์ด์ ํ์ํ์ง ์์ ๊ฒฝ์ฐ ํญ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํ์ญ์์ค.
useEffect์์ ๋ฐํ๋ ์ ๋ฆฌ ํจ์๋ฅผ ํ์ฉํ์ญ์์ค. - ์ฒ ์ ํ๊ฒ ํ ์คํธ: ๋ค์ํ ์๋๋ฆฌ์ค์์ ์์๋๋ก ๋์ํ๋์ง ํ์ธํ๊ธฐ ์ํด ์ด๋ฒคํธ ์ฒ๋ฆฌ ๋ ผ๋ฆฌ๋ฅผ ์ฒ ์ ํ๊ฒ ํ ์คํธํ์ญ์์ค. ํนํ ๊ฐ์ฅ์๋ฆฌ ์ฌ๋ก์ ๋ค๋ฅธ ์ปดํฌ๋ํธ์์ ์ํธ ์์ฉ์ ์ฃผ์ํ์ญ์์ค.
- ์ ๋ฐ์ ์ธ ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ: ๊ตฌํํ๋ ๋ชจ๋ ์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ ์ฒ๋ฆฌ ๋ ผ๋ฆฌ๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ์ ์ ์งํ๋์ง ํ์ธํฉ๋๋ค. ์๋ฅผ ๋ค์ด ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ์์์ ๋ชฉ์ ๊ณผ ํธ๋ฆฌ๊ฑฐํ๋ ์ด๋ฒคํธ์ ๋ํ ์๋ฏธ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
๊ตญ์ ํ ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ์ฒญ์ค์ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๋ฌธํ์ ์ฐจ์ด์ ์ง์ญ์ ๋ณํ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํค๋ณด๋ ๋ ์ด์์ ๋ฐ ์ ๋ ฅ ๋ฐฉ์์ ๋ค์ํ ์ธ์ด์ ์ง์ญ์ ๋ฐ๋ผ ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ต๋๋ค. ํน์ ํค ๋๋ฆ ๋๋ ์ ๋ ฅ ํจํด์ ์์กดํ๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ค๊ณํ ๋๋ ์ด๋ฌํ ์ฐจ์ด์ ์ ์ผ๋์ ๋์ญ์์ค.
๋ํ ๋ค๋ฅธ ์ธ์ด์ ํ ์คํธ ๋ฐฉํฅ์ฑ์ ๊ณ ๋ คํ์ญ์์ค. ์ผ๋ถ ์ธ์ด๋ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ(LTR)์ผ๋ก ์์ฑ๋๊ณ ๋ค๋ฅธ ์ธ์ด๋ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ(RTL)์ผ๋ก ์์ฑ๋ฉ๋๋ค. ํ ์คํธ ์ ๋ ฅ ๋๋ ์กฐ์์ ์ฒ๋ฆฌํ ๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ ๋ ผ๋ฆฌ๊ฐ ํ ์คํธ ๋ฐฉํฅ์ฑ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋์ง ํ์ธํ์ญ์์ค.
ํฌํธ์์ ์ด๋ฒคํธ ์ฒ๋ฆฌ์ ๋ํ ๋์ฒด ์ ๊ทผ ๋ฐฉ์
์บก์ฒ ๋จ๊ณ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ํฌํธ๋ก ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ์ผ๋ฐ์ ์ด๊ณ ํจ๊ณผ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ด์ง๋ง, ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๊ณ ๋ คํ ์ ์๋ ๋์ฒด ์ ๋ต์ด ์์ต๋๋ค.
Ref ๋ฐ contains() ์ฌ์ฉํ๊ธฐ
์์ ๋ชจ๋ฌ ์์ ์์ ์ค๋ช
ํ ๊ฒ์ฒ๋ผ ref์ contains() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฒคํธ๊ฐ ํน์ ์์ ๋๋ ํด๋น ํ์ ์์ ๋ด์์ ๋ฐ์ํ๋์ง ์ฌ๋ถ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ํน์ ์ปดํฌ๋ํธ ์ํ์ ํด๋ฆญ์ ๊ตฌ๋ณํด์ผ ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ ์ฌ์ฉํ๊ธฐ
๋ ๋ณต์กํ ์๋๋ฆฌ์ค์ ๊ฒฝ์ฐ ํฌํธ ์ฝํ
์ธ ๋ด์์ ๋์คํจ์น๋๋ ์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ๋ฅผ ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ ํฌํธ๊ณผ ๋ถ๋ชจ ์ปดํฌ๋ํธ ๊ฐ์ ์ด๋ฒคํธ๋ฅผ ํต์ ํ๋ ๋์ฑ ๊ตฌ์กฐ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ ์ ์์ต๋๋ค. CustomEvent๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ์ด๋ฒคํธ๋ฅผ ์์ฑํ๊ณ ๋์คํจ์นํฉ๋๋ค. ์ด๋ ์ด๋ฒคํธ์ ํจ๊ป ํน์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ผ ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค.
์ปดํฌ๋ํธ ๊ตฌ์ฑ ๋ฐ ์ฝ๋ฐฑ
๊ฒฝ์ฐ์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ์ ์คํ๊ฒ ๊ตฌ์ฑํ๊ณ ์ฝ๋ฐฑ์ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ๊ฐ์ ์ด๋ฒคํธ๋ฅผ ํต์ ํ์ฌ ์ด๋ฒคํธ ์ ํ์ ๋ณต์ก์ฑ์ ์์ ํ ํผํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ์ฝ๋ฐฑ ํจ์๋ฅผ ํฌํธ ์ปดํฌ๋ํธ์ prop์ผ๋ก ์ ๋ฌํ ์ ์์ผ๋ฉฐ, ๊ทธ๋ฌ๋ฉด ํฌํธ ์ฝํ ์ธ ๋ด์์ ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ํธ์ถ๋ฉ๋๋ค.
๊ฒฐ๋ก
React ํฌํธ์ ์ ์ฐํ๊ณ ๋์ ์ธ UI๋ฅผ ๋ง๋ค ์ ์๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง ์ด๋ฒคํธ ์ฒ๋ฆฌ์๋ ์๋ก์ด ๊ณผ์ ๋ฅผ ์ ์ํฉ๋๋ค. ์ด๋ฒคํธ ์บก์ฒ ๋จ๊ณ๋ฅผ ์ดํดํ๊ณ ์ด๋ฒคํธ ์ ํ๋ฅผ ์ ์ดํ๋ ๊ธฐ์ ์ ๋ง์คํฐํ๋ฉด ํฌํธ ๊ธฐ๋ฐ ์ปดํฌ๋ํธ์์ ์ด๋ฒคํธ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์์ธก ๊ฐ๋ฅํ๊ณ ๋ฐ๋์งํ ์ ํ๋ฆฌ์ผ์ด์ ๋์์ ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ์ ์คํ๊ฒ ๊ณ ๋ คํ๊ณ ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ธฐ ์ํด ๊ฐ์ฅ ์ ํฉํ ์ด๋ฒคํธ ์ฒ๋ฆฌ ์ ๋ต์ ์ ํํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ๊ธ๋ก๋ฒ ๋๋ฌ ๋ฒ์๋ฅผ ์ํด ๊ตญ์ ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ๊ทธ๋ฆฌ๊ณ ํญ์ ๊ฐ๋ ฅํ๊ณ ์์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฒ ์ ํ ํ ์คํธ๋ฅผ ์ฐ์ ์ํ์ญ์์ค.